<template>
  <div class="home-top-half">
    <div class="home-nav">
      <div class="home-nav-logo">随手递</div>
      <div class="home-nav-logo-desc">足不出户 买遍全城</div>
      <el-button class="home-nav-button" type="danger" size="small" @click="gotoSellerRegister">我要开店</el-button>
      <el-button-group v-if="nowUser === null" class="home-nav-button">
        <el-button style="height:100%;background-color:transparent;border:none;" type="primary" size="small" @click="register">注册</el-button>
        <el-button style="height:100%;background-color:transparent;border-left:1px solid #ffffff;border-right:none;border-top:none;border-bottom:none;" type="primary" size="small" @click="login">登录</el-button>
      </el-button-group>
      <el-button v-if="nowUser !== null" class="home-nav-user-button" style="height:100%;" type="primary" size="small" @click="gotoUser">
        <i class="far fa-user"></i>
        &nbsp;{{ nowUser.username }}</el-button>
    </div>
    <div class="home-logo">
      随手递
    </div>
    <div class="home-search-holder">
      <div class="home-address-holder">
        <area-cascader :level="1" type="text" v-model="addressPredix" placeholder="请选择省市区"></area-cascader>
      </div>
      <div class="home-search-box-holder">
        <el-form :inline="true">
          <el-form-item>
            <el-input placeholder="请输入商品名或店铺名" v-model="keyword" class="home-search-input">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button class="home-search-button" @click="searchShops">搜 索</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { ROUTENAME } from 'services/constConfig.js'
import shopService from 'services/shopService.js'
import productService from 'services/productService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  components: {},
  data() {
    return {
      keyword: '',
      addressPredix: ['上海市', '市辖区', '闵行区'],
      shops: []
    }
  },
  computed: mapGetters({
    nowUser: 'nowUser'
  }),
  methods: {
    ...mapActions({
      setNowUser: 'setNowUser'
    }),
    getShopById(products, index) {
      if (index < products.length) {
        let shopId = products[index].shopid
        shopService
          .getShopById(shopId)
          .then(response => {
            if (
              response.data.Shop === null ||
              response.data.Shop === undefined
            ) {
              notifyUtil.showError('查找商店失败', '服务器错误')
            } else {
              this.shops.push(response.data.Shop[0])
              this.getShopById(products, ++index)
            }
          })
          .catch(error => {
            console.log(error)
            this.getShopById(products, ++index)
          })
      } else {
        this.gotoStores()
      }
    },
    getShops() {
      shopService.getShopsByName(this.keyword).then(response => {
        if (response.data.Shop === null || response.data.Shop === undefined) {
          // notifyUtil.showError('查找商店失败', '暂无相关商店')
          // this.getShopsByProductName()
        } else {
          let responseShops = response.data.Shop
          this.$set(this, 'shops', responseShops)
        }
        this.getShopsByProductName()
      })
    },
    getShopsByProductName() {
      productService.getProductsByName(this.keyword).then(response => {
        if (
          response.data.Product === null ||
          response.data.Product === undefined
        ) {
          // notifyUtil.showError('查找商品失败', '暂无相关商品')
          this.gotoStores()
        } else {
          this.getShopById(response.data.Product, 0)
        }
      })
    },
    searchShops() {
      this.getShops()
    },
    login() {
      this.$router.push({ path: ROUTENAME.LOGIN })
    },
    register() {
      this.$router.push({ path: ROUTENAME.REGISTER })
    },
    gotoSellerRegister() {
      this.$router.push({ path: ROUTENAME.SELLER_REGISTER })
    },
    gotoUser() {
      this.$router.push({ path: ROUTENAME.USER })
    },
    gotoStores() {
      let resultAddressPredix = ''
      if (
        this.addressPredix[0] !== null ||
        this.addressPredix[0] !== undefined
      ) {
        resultAddressPredix += this.addressPredix[0]
      }
      if (
        this.addressPredix[1] !== null ||
        this.addressPredix[1] !== undefined
      ) {
        resultAddressPredix += this.addressPredix[1]
      }
      if (
        this.addressPredix[2] !== null ||
        this.addressPredix[2] !== undefined
      ) {
        resultAddressPredix += this.addressPredix[2]
      }
      this.$router.push({
        path: ROUTENAME.STORES,
        query: {
          addressPredix: resultAddressPredix,
          shops: JSON.stringify(this.shops)
        }
      })
    }
  }
}
</script>
<style>
.home-top-half {
  position: absolute;
  background-color: #409eff;
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: center;
  background: url(//shadow.elemecdn.com/faas/desktop/media/img/map.012b5c.png)
    center no-repeat #008de1;
}
.home-nav {
  position: absolute;
  top: 5%;
  width: 100%;
  height: 30px;
  /* background-color: blue; */
}
.home-nav-button {
  height: 100%;
  color: #ffffff;
  float: right;
  margin-right: 30px;
  font-size: 14px;
}
.home-nav-user-button {
  height: 100%;
  color: #ffffff;
  float: right;
  margin-right: 30px;
  font-size: 14px;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.home-nav-user-button:hover {
  background-color: transparent;
}
.home-nav-logo {
  height: 100%;
  line-height: 30px;
  color: #ffffff;
  float: left;
  margin-top: -2px;
  margin-left: 60px;
  font-size: 14px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.home-nav-logo-desc {
  height: 100%;
  line-height: 30px;
  color: #ffffff;
  float: left;
  margin-left: 10px;
  font-size: 14px;
}
.home-logo {
  position: absolute;
  top: 40%;
  width: 300px;
  height: 56px;
  line-height: 56px;
  font-size: 50px;
  color: #ffffff;
  /* background-color:; */
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.home-address-holder {
  /* position: absolute; */
  /* top: 76%; */
  /* margin-left: 100px; */
  float: left;
  width: 250px;
  height: 56px;
  /* background-color: blue; */
  /* float: left; */
  /* display: flex; */
  /* justify-content: center; */
}
.home-search-box-holder {
  /* position: absolute; */
  /* top: 76%; */
  float: left;
  margin-left: 10px;
  width: 100px;
  height: 56px;
  /* background-color: blue; */
}
.el-cascader .el-input__inner {
  width: 250px;
  height: 56px;
  line-height: 56px;
  /* border-radius: 0; */
}
.el-cascader .el-cascader__label {
  /* width: 170px; */
  /* height: 56px; */
  line-height: 56px;
  /* border-radius: 0; */
}
.home-search-holder {
  position: absolute;
  top: 76%;
  width: 1000px;
  height: 56px;
  margin-left: auto;
  margin-right: auto;
  /* background-color: red; */
  /* display: flex; */
  /* justify-content: center; */
}
.home-search-input .el-input__inner {
  width: 600px;
  height: 56px;
  /* border-radius: 0; */
  font-size: 16px;
  color: #606266;
}
.home-search-button {
  float: right;
  margin-right: 0;
  width: 128px;
  height: 56px;
  /* border-radius: 0; */
  font-size: 16px;
  background-color: #f74342;
  color: #ffffff;
  border: none;
}
</style>
